<template>
	<el-dialog v-model="isVisible" width="auto" @close="closeLogin" :show-close="false" align-center
		:before-close="handleDialogClose">
		<template #header>
			<el-alert :class="dialogClass" title="为了您更好的体验请正确填写以下信息!" type="info" :closable="false"
				style="margin-bottom:10px" center show-icon />
		</template>
		<el-form :model="userInfo" :rules="rules" ref="loginForm" @submit.prevent="handleLogin" label-width="auto">
			<el-form-item label="您的名字" prop="name">
				<el-input v-model="userInfo.name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="您的手机号" prop="phoneNum">
				<el-input v-model="userInfo.phoneNum" autocomplete="off" maxlength="11" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleLogin">提交</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import apiClient from '../api/index.js'
	const isVisible = ref(false);
	const userInfo = ref({
		phoneNum: '',
		name: ''
	});

	const rules = {
		name: [{
			required: true,
			message: '请输入您的名字',
			trigger: 'blur'
		}],
		phoneNum: [{
				required: true,
				message: '请输入您的手机号',
				trigger: 'blur'
			},
			{
				pattern: /^1[3-9]\d{9}$/,
				message: '请输入有效的手机号',
				trigger: 'blur'
			}
		]
	};
	const uid = localStorage.getItem('uid');
	const token = localStorage.getItem('token');
	const loginForm = ref(null);
	const emit = defineEmits(['updateName']);
	const globalLoading = inject('globalLoading');
	const {
		setLoading
	} = globalLoading;
	const dialogClass = ref('');

	const handleLogin = () => {
		setLoading(true);
		loginForm.value.validate((valid) => {
			if (valid) {
				apiClient.login(userInfo.value).then(res => {
					if (res.status === 200) {
						localStorage.setItem('uid', res.data.data.user_id)
						localStorage.setItem('token', res.data.data.token)
						localStorage.setItem('name', res.data.data.name)
						localStorage.setItem('answerHistroy', JSON.stringify(res.data.data
							.joinHistory))

						emit('updateName', res.data.data.name);
					}
				}).catch(err => {
					console.log(err);
				});
				// 登录成功后关闭对话框
				closeLogin();
			} else {
				console.log('表单验证失败');
				addShakeClass();
				return false;
			}
		});
		setLoading(false);
	};

	const closeLogin = () => {
		isVisible.value = false;
	};

	const showLogin = () => {
		if (uid === null && token === null) {
			isVisible.value = true;
		}
	};

	const addShakeClass = function() {
		console.log('addShakeClass is Click');
		dialogClass.value = 'shake';
		setTimeout(() => {
			dialogClass.value = '';
		}, 300);
	}

	const handleDialogClose = (done) => {
		console.log('handleDialogClose is Click');
		addShakeClass();
	}

	defineExpose({
		showLogin,
	});
</script>

<style scoped>
	@keyframes shake {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-5px);
		}

		50% {
			transform: translateX(5px);
		}

		75% {
			transform: translateX(-5px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.shake {
		animation: shake 0.2s;
	}
</style>